<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>创建节点</title>
    <script>
        function f1(){
            // 点击超链接之后,在超链接原本的内容后面添加一个div
            // 该div中存在文本内容:这是一个div
            // 由于此时页面中并不存在该div
            // 因此,创建出对应的div以及div中内容
            // 创建时分为元素节点与文本节点
            // 元素节点:对应的是HTML标签
            // 文本节点:对应的是HTML的内容

            // 1.创建元素节点
            // 通过document.createElement("标签名")方法创建一个对应的标签
            // 返回值即为创建的节点
            let d = document.createElement("div");
            // 2.创建文本节点
            // 通过document.createTextNode("文本内容")方法创建一个文本节点
            // 返回值即为创建的节点
            let text = document.createTextNode("这是一个div");

            // 将文本节点添加到元素节点标签体中
            d.appendChild(text);

            // 将创建的div添加到超链接的末尾
            // let a = document.getElementById("a");
            // a.appendChild(d);

            // 将div添加到超链接之前
            let b = document.getElementById("b");
            // b.insertBefore(d,a);

            // 使用div替换原有的超链接
            b.replaceChild(d,a);
        }
    </script>
</head>
<body id="b">
<a href="javascript:;" id="a" onclick="f1()">超链接</a><br>
</body>
</html>